<template>
    <div class="categories">
      <Separator :nameList='nameList'></Separator>
      <el-card class="box-card">
         <el-button type="primary" @click="addGoods">添加分类</el-button>       
        <div class="tree-table">
            <tree-table ref="treeRef" :data="goodsTab" :columns="columns" stripe border show-index 
                        :selection-type='false' :expand-type='false'>
                <template slot="isOk" slot-scope="scope">
                   <i  v-if="scope.row.cat_deleted" style="color:green" class="el-icon-success"></i>
                   <i  v-else class="el-icon-error" style="color:red" ></i>
                </template>
                <template slot="level" slot-scope="scope">
                     <el-button v-if="scope.row.cat_level===0" type="primary" size="mini" plain>一级</el-button>
                    <el-button v-else-if="scope.row.cat_level===1" type="success" size="mini" plain>二级</el-button>
                    <el-button v-else type="warning"  size="mini" plain>三级</el-button>
                </template>
                <template  slot="operation">
                    <el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
                    <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
                </template>
            </tree-table>
        </div> 
        <div class="block-page">
            <el-pagination
                          @size-change="handleSizeChange"
                          @current-change="handleCurrentChange"
                          :current-page="goodsList.pagenum"
                          :page-size="goodsList.pagesize"
                          layout="total, prev, pager, next, jumper"
                          :total="total" >
            </el-pagination>
        </div>
      </el-card>
      <!-- 添加分类 -->
      <el-dialog title="添加分类" :visible.sync="addGgoodsDialog" width="40%" @close='addClose'>
        <el-form ref="addGoodsRef" :model="addCateForm" :rules="addGoodsRules" label-width="80px">
            <el-form-item label="分类名称" prop='goodsName'>
               <el-input v-model="addCateForm.goodsName" ></el-input>
            </el-form-item>
            <el-form-item label="父级分类" >
               <!-- options用来指定数据源 -->
               <!-- props用来指定数据对象 -->
               <el-cascader ref="goodsCascader" change-on-select  v-model="prdvalue" :options="goodsListPrd" expand-trigger='hover' :props="goodsPrdProp" @change="goodsChange" clearable></el-cascader>
            </el-form-item>
        </el-form>    
        <span slot="footer" class="dialog-footer">
            <el-button @click="addGgoodsDialog = false">取 消</el-button>
            <el-button type="primary" @click="addGgoodsSure">确 定</el-button>
        </span>
      </el-dialog>
    </div>
</template>
    
<script>
  import Separator from 'components/content/separator/Separator'
  import { getCategories,addGoods,getGoodsPrd } from 'network/goods/categories'
  export default {
    name:'Categories',
    components:{
        Separator
    },
    data(){
        return{
            nameList:['商品管理','商品分类'],
            goodsList:{
                type:'',
                // 当前页码
                pagenum:1,
                // 每页显示多少条数据
                pagesize:5
            },
            goodsTab:[],
            // 总页数
            total:null,
            //添加商品会话框
            addGgoodsDialog:false,
            //添加商品验证规则
            addGoodsRules:{
               goodsName:[
                   {required:true,message:'请输入分类名称',trigger:'blur'},
                   {min:3,max:10,trigger:'blur'}
                ],
            },
            columns:[
                {
                    label:'分类名称',
                    prop:'cat_name'
                },
                {
                    label:'是否有效',
                    prop:'cat_deleted',
                    //将当前列定义为模板列
                    type:'template',
                    template:'isOk'
                },
                {
                    label:'排序',
                    prop:'cat_level',
                    type:'template',
                    template:'level'
                },
                {
                     label:'操作',
                     width:'250px',
                     type:'template',
                     template:'operation'
                }
            ],
            addCateForm:{
                // 要添加的分类的名称
                goodsName:'',
                // 父级id
                goodPrd:0,
                //分类层级 默认一级分类
                goodsLeve:0,
            },
          
            // 保存父级分类数据
            goodsListPrd:[],
            //保存级联选择框 选中数据 必须是数组
            prdvalue:[],
            goodsPrdProp:{
                // 指定具体选中的值
                value:'cat_id',
                //指定所看到的属性
                label:'cat_name',
                // 父子嵌套使用的属性
                children:'children'
            }

        }
    },
    created(){
       this.getCategoriesList(this.goodsList)
    },
    methods:{
        getCategoriesList(goods){
            getCategories(goods.type,goods.pagenum,goods.pagesize).then(res=>{
                this.goodsTab=res.data.data.result;
                this.total=res.data.data.total;
            },err=>{

            })
        },
        //当页面条数发生改变时触发
        handleSizeChange(pagesize){
           this.goodsList.pagesize=pagesize;
           this.getCategoriesList(this.goodsList)
        },
        //当前页码
        handleCurrentChange(pagenum){
          this.goodsList.pagenum=pagenum;
          this.getCategoriesList(this.goodsList)
        },
        // 添加分类按钮
        addGoods(){
          getGoodsPrd(2).then(res=>{
            if(!res.data.meta.status===200){
                return this.$message.error('获取父级列表数据失败');
            }
            this.goodsListPrd = res.data.data;             
            console.log( this.goodsListPrd);

            },err=>{
              console.log(err)
            })
           this.addGgoodsDialog=true     
        },
        //添加分类确定按钮
        addGgoodsSure(){
          this.$refs.addGoodsRef.validate(val=>{
            if(!val){
              return false
            }
            addGoods( this.addCateForm.goodPrd,this.addCateForm.goodsName,this.addCateForm.goodsLeve).then(res=>{
             if(!res.data.meta.status===201){
                 return this.$message.error('添加失败');
             }
              this.$message.success('添加成功');
              this.getCategoriesList(this.goodsList);
              this.addGgoodsDialog=false   
           },err=>{
             console.log(err);
           })
          })
        },
        //只要级联选择器的数据发生了变化 就触发的方法
       goodsChange(){
         if(this.prdvalue.length>0){
            this.addCateForm.goodPrd=this.prdvalue[this.prdvalue.length-1];
            this.addCateForm.goodsLeve=this.prdvalue.length;
         }else{
            this.addCateForm.goodPrd=0;
            this.addCateForm.goodsLeve=0;
         }
         console.log(this.addCateForm);
       },
       //点击叉号关闭弹层触发事件
       addClose(){
           this.$refs.addGoodsRef.resetFields();
           this.prdvalue=[];
           this.addCateForm.goodPrd=0;
           this.addCateForm.goodsLeve=0;

        //  clearCheckedNodes
       }
    }
  }
</script>

<style lang="less" scoped>

 .block-page{
     margin-top: 15px;
 }
 .tree-table{
     margin-top: 15px;
 }
 .el-cascader{
     width: 100%;
 }
</style>